{extend name='base'}

{block name='seo'}
<title>H-ui.admin v3.0</title>
<meta name="keywords" content="H-ui.admin v3.0,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
<meta name="description" content="H-ui.admin v3.0，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css">

<style>
    .layui-table-cell{
        height: auto;!important;
    }
</style>
</head>
<body>
{/block}
<!--header-->
<!--menu-->

{block name='content'}
<section class="Hui-article-box">
    <nav class="breadcrumb"><i class="Hui-iconfont"></i> <a href="/" class="maincolor">首页</a>
        <span class="c-999 en">&gt;</span>
        <span class="c-666">图片管理</span>
        <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="Hui-article">
        <article class="cl pd-20">

            <table id="imageTable" lay-filter="imageTable"></table>

        </article>
        <footer class="footer">
            <p>感谢jQuery、layer、laypage、Validform、UEditor、My97DatePicker、iconfont、Datatables、WebUploaded、icheck、highcharts、bootstrap-Switch<br> Copyright &copy;2015 H-ui.admin v3.0 All Rights Reserved.<br> 本后台系统由<a href="http://www.h-ui.net/" target="_blank" title="H-ui前端框架">H-ui前端框架</a>提供前端技术支持</p>
        </footer>
    </div>
</section>
{/block}
<!--footer-->

{block name='js'}
<!--请在下方写此页面业务相关的脚本-->

<script src="__STATIC__/layui/layui.js"></script>

<!--表格头部工具栏-->
<script type="text/html" id="tableHeadToolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>

    </div>
</script>

<!--表格行内工具条-->
<script type="text/html" id="tableRowBar">

    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.use(['layer', 'table','form'], function(){
        var layer = layui.layer
            ,table = layui.table
            ,form = layui.form;

        table.render({
            elem: '#imageTable'
            //,height: 312
            ,url: '/admin/image/tableData' //数据接口
            ,toolbar: '#tableHeadToolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', hide:true}
                ,{field: 'img_path', title: '图片', templet: function(d){
                        return '<img style="width: 80px;height: 80px" src="'+d.img_path+'" />'
                    }}
                ,{field: 'type', title: '类型'}
                ,{field: 'create_time', title: '时间'}
                ,{title: '操作',align:'center', toolbar: '#tableRowBar'}

            ]]
        });

        //头工具栏事件
        table.on('toolbar(imageTable)', function(obj){
            /*var checkStatus = table.checkStatus(obj.config.id);*/
            switch(obj.event){
                case 'add':
                   /* var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));*/
                   $.ajax({
                       url:'/admin/image/form',
                       success:function (res) {
                           layer.open({
                               type: 1,
                               content:res,
                               end:function () {

                                   table.reload()
                               }
                           })


                           form.render(); //更新全部


                       }
                   })


                    break;

            };
        });

        //监听行工具事件
        table.on('tool(imageTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //console.log(data)
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    $.ajax({
                        url:'/admin/image/del',
                        data:{id:data.id},
                        success:function () {
                            layer.msg('删除成功')
                        },
                        error:function () {
                            layer.msg('error')

                        }
                    })
                    //layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });







    });
</script>

<!--/请在上方写此页面业务相关的脚本-->
{/block}